<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emp</title>
    <style>
        /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
        html, body, #app {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0;
            /*外部间距也是如此设置*/
            margin: 0;
            /*统一设置高度为100%*/
            height: 100%;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="el/index.css">
    <script src="js/el/index.js"></script>
    <script type="text/javascript" src="js/axios/index.js"></script>
    <script type="text/javascript" src="api/ajax.js"></script>

</head>
<body>
<div id="app" style="margin: 5px">
    <el-form v-model="empQueryForm" inline size="mini" style="text-align: left;">
        <el-form-item label="姓名">
            <el-input id="empQueryFormName" v-model="empQueryForm.ename" clearable></el-input>
        </el-form-item>
        <el-form-item label="工作">
            <el-select v-model="empQueryForm.job" placeholder="请选择" clearable>
                <el-option key="1" label="教主" value="教主"></el-option>
                <el-option key="2" label="护法" value="护法"></el-option>
                <el-option key="3" label="五散人" value="五散人"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门">
            <el-radio-group v-model="empQueryForm.deptno">
                <el-radio label="1">开发</el-radio>
                <el-radio label="2">测试</el-radio>
                <el-radio label="3">市场</el-radio>
                <el-radio label="4">运营</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button @click="getEmpListByPage" type="primary" >查询</el-button>
        </el-form-item>
        <el-form-item style="float: right">
            <el-button @click="removeBatch" type="danger" >批量删除</el-button>
        </el-form-item>
        <el-form-item style="float: right">
            <el-button @click="showAddEmpDialogHandler" type="primary" >新增</el-button>
        </el-form-item>
    </el-form>
    <el-dialog :visible.sync="showEmpDialog" v-if="showEmpDialog" fullscreen :modal="false">
        <el-form :model="emp" label-width="130px" size="mini">
            <el-form-item label="姓名">
                <el-input v-model="emp.ename"></el-input>
            </el-form-item>
            <el-form-item label="工作">
                <el-input v-model="emp.job"></el-input>
            </el-form-item>
            <el-form-item label="领导编号">
                <el-input v-model="emp.mgr"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-date-picker v-model="emp.hiredate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="display: inline"></el-date-picker>
            </el-form-item>
            <el-form-item label="工资">
                <el-input v-model="emp.sal"></el-input>
            </el-form-item>
            <el-form-item label="提成">
                <el-input v-model="emp.comm"></el-input>
            </el-form-item>
            <el-form-item label="部门编号">
                <el-input v-model="emp.deptno"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEmpDialog = false">取消</el-button>
            <el-button @click="empDialogConfirm()">确定</el-button>
        </div>
    </el-dialog>
    <el-table :data="empList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="empno" label="员工编号"></el-table-column>
        <el-table-column prop="ename" label="姓名"></el-table-column>
        <el-table-column prop="job" label="工作"></el-table-column>
        <el-table-column prop="mgr" label="领导编号"></el-table-column>
        <el-table-column prop="hiredate" label="入职日期" width="170"></el-table-column>
        <el-table-column prop="sal" label="工资"></el-table-column>
        <el-table-column prop="comm" label="提成"></el-table-column>
        <el-table-column prop="deptno" label="部门编号"></el-table-column>
        <el-table-column prop="delete" label=""></el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
                <el-button class="el-icon-edit-outline" @click="showUpdateEmpDialogHandler(scope.$index, scope.row)" type="primary" size="mini"></el-button>
                <el-button class="el-icon-delete-solid" @click="deleteEmp(scope.$index, scope.row)" type="danger" size="mini"></el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        name: "Emp",
        data: function () {
            return {
                radio:2,
                hiredate:null,
                checkList: [],
                showEmpDialog: false,
                empQueryForm: {},
                operationType: "",
                empList: [],
                multipleSelection:[],
                // 新增(新增前需要清空emp),编辑(需要将当前行赋值给emp),查询(与查询条件双向绑定)共用
                emp: {},
            }
        },
        methods: {
            showUpdateEmpDialogHandler(index, row) {
                this.operationType = "update";
                this.emp = row;
                this.showEmpDialog = true;
            },
            showAddEmpDialogHandler() {
                this.operationType = "add";
                this.emp = {};
                this.showEmpDialog = true;
            },
            empDialogConfirm() {
                if (this.operationType === "add") {
                    this.addEmp()
                }
                if (this.operationType === "update") {
                    this.updateEmp()
                }
                this.showEmpDialog = false;
            },
            async deleteEmp(index, row) {
                this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    let url = `emp/emp/` + row.empno;
                    ajax(url,null,'delete').then((res) => {
                        if (res.success) {
                            this.getEmpListByPage();
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },
            addEmp() {
                let url = `emp/emp`;
                ajax(url, this.emp, "POST").then(res => {
                    if (res.success) {
                        this.getEmpListByPage();
                    }
                })
            },
            async updateEmp() {
                let url = `emp/emp`;
                let res = await ajax(url, this.emp, "put");
                if (res.success) {
                    this.getEmpListByPage();
                }
            },
            // pageSize变动,触发重新从后台加载数据
            sizeChangeHandle(pageSize) {
                this.pageSize = pageSize;
                this.getEmpListByPage();
            },
            // currentPage变动,触发从后台加载数据
            currentChangeHandle(currentPage) {
                this.currentPage = currentPage;
                this.getEmpListByPage();
            },
            async getEmpListByPage() {
                let url = `emp/getEmpListByPage`;
                let res = await ajax(url, this.empQueryForm, 'POST');
                if (res.success) {
                    this.empList = res.data;
                }
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            removeBatch(){
                if (this.multipleSelection == null || this.multipleSelection.length === 0) {
                    return;
                }
                this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    let url = "emp/removeBatch";
                    let empnos = this.multipleSelection.map(item=>item.empno);
                    ajax(url, empnos, "POST").then(res => {
                        if (res.success) {
                            this.getEmpListByPage();
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            }
        },
        mounted() {
            this.getEmpListByPage()
        }

    })
</script>
